<template>
	<u-navbar placeholder placeholder :autoBack="autoBack" :bgColor="bgColor" @leftClick="handleClickLeft" @rightClick="handleClickRight">
		<view class="text-blue" slot="left">
			<image v-if="theme==='black'" src="/static/images/login/back.png" class="width-24" mode="widthFix"></image>
			<image v-if="theme==='white'" src="/static/images/login/back-white.png" class="width-24" mode="widthFix">
			</image>
		</view>
		<view class="" slot="center">
			<text class="header-title" :class="{'text-white':theme==='white'}">{{title}}</text>
		</view>
		<template slot="right">
			<slot #rightTool>
				<text>{{rightText}}</text>
			</slot>
		</template>
		<!-- 	<view class="text-blue">
			
		</view> -->
	</u-navbar>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			theme: {
				type: String,
				default: 'black'
			},
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			autoBack:{
				type:Boolean,
				default:true
			}
		},
		methods: {
			handleClickLeft(){
				this.$emit('left')
			},
			handleClickRight() {
				this.$emit('right')
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-title {
		font-weight: 600;
		font-size: 34rpx;

	}
</style>